<template>
  <div class="nav-tabs">
    <div class="nav-tabs-container">
      <div class="nav-tabs-header">
        <div class="nav-tabs-header-circle">
          <div class="nav-tabs-header-circle-ring"></div>
        </div>

        <div class="nav-tabs-menu">
          <div class="nav-tabs-menu-title">{{ title }}</div>

          <div class="nav-tabs-menu-border"></div>

          <div class="nav-tabs-menu-list">
            <div
              v-for="(item, i) in navOptions"
              :key="i"
              :class="['nav-tabs-menu-item', item.value === currentNav && 'is-active']"
              @click="updateNav(item.value)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>

      <div class="nav-tabs-timeline">
        <el-scrollbar>
          <div
            v-for="(item, i) in yearOptions"
            :key="i"
            :class="['nav-tabs-timeline-item', item.value === currentYear && 'is-active']"
            @click="updateYear(item.value)"
          >
            <div class="nav-tabs-timeline-item-icon">
              <div class="nav-tabs-timeline-item-icon-box">
                <cjui-icon v-if="item.value === currentYear" :size="32" color="#fff" icon="ep:histogram" />
              </div>
            </div>

            <div class="nav-tabs-timeline-item-box">
              {{ item.label }}
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Props } from './types'

withDefaults(defineProps<Props>(), {
  title: '',
  currentNav: '',
  navOptions: () => [],
  currentYear: '',
  yearOptions: () => []
})
const emits = defineEmits<{
  updateNav: [value: string];
  updateYear: [value: string];
}>()

function updateNav(value: string) {
  emits('updateNav', value)
}

function updateYear(value: string) {
  emits('updateYear', value)
}
</script>

<style lang="scss" scoped>
// css 变量
.nav-tabs {
  --nav-main-color: #50dfca; // 组件主题色
  --nav-bg-color: aliceblue; // 组件背景色
  --nav-circle-width: 100px; // 组件顶部圆宽度
  --timeline-circle-width: 50px; // 组件时间线最大宽度
}

// 定位层

.nav-tabs {
  min-height: 300px;
}

.nav-tabs-container {
  height: 100%;
  position: relative;
}

// 导航Tabs

.nav-tabs-header {
  position: absolute;
  display: flex;
  align-items: center;
}

.nav-tabs-header-circle {
  width: var(--nav-circle-width);
  height: var(--nav-circle-width);
  padding: 20px;
  box-sizing: border-box;
}

.nav-tabs-header-circle-ring {
  width: 100%;
  height: 100%;
  background-color: var(--nav-main-color);
  border-radius: 100%;
  position: relative;

  &::before,
  &::after {
    content: '';
    display: block;
    border: 5px solid;
    border-color: #fff transparent;
    border-radius: 100%;
    box-sizing: border-box;
    position: absolute;
  }

  &::before {
    width: calc(var(--nav-circle-width) - 20px);
    height: calc(var(--nav-circle-width) - 20px);
    top: -10px;
    left: -10px;
    animation: nav-tabs-header-circle-ring-before 1.8s linear 0s infinite;
  }

  &::after {
    width: var(--nav-circle-width);
    height: var(--nav-circle-width);
    top: -20px;
    left: -20px;
    animation: nav-tabs-header-circle-ring-after 1.8s linear 0s infinite;
  }
}

.nav-tabs-menu {
  margin-bottom: 10px;
}

.nav-tabs-menu-title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  font-weight: bold;
  text-align-last: justify;
  padding-left: 38px;
  padding-right: 10px;
  margin-bottom: 4px;
}

.nav-tabs-menu-border {
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
  padding-left: 16px;
  box-sizing: border-box;
  position: relative;

  &::before,
  &::after {
    content: '';
    display: block;
    background-color: #fff;
  }

  &::before {
    width: 12px;
    height: 12px;
    transform: skewX(45deg);
    position: absolute;
    top: -10px;
  }

  &::after {
    width: calc(100% - 20px);
    height: 4px;
    transform: skewX(45deg);
    position: absolute;
    top: 0;
    left: 22px;
  }
}

.nav-tabs-menu-list {
  display: flex;
  margin-left: 15px;
  font-size: 12px;
}

.nav-tabs-menu-item {
  color: var(--nav-main-color);
  padding: 8px 16px;
  margin-right: 10px;
  word-break: keep-all;
  position: relative;
  cursor: pointer;

  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 4px 12px -8px #cabfff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: skewX(-25deg);
  }

  &:hover,
  &.is-active {
    color: #fff;

    &::before {
      background-color: var(--nav-main-color);
    }
  }
}

// 时间线

.nav-tabs-timeline {
  position: absolute;
  top: calc(var(--nav-circle-width) + 10px);
  bottom: 0;

  &::before {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: calc(var(--nav-circle-width) / 2);
    transform: translateX(-50%);
    z-index: -1;
  }

  :deep(.el-scrollbar__view) {
    padding-top: 30px;
    box-sizing: border-box;
  }

  :deep(.el-scrollbar__bar.is-vertical) {
    right: unset;
    left: 10px;
  }
}

.nav-tabs-timeline-item {
  color: var(--nav-main-color);
  font-size: 14px;
  word-break: keep-all;
  padding: 4px 4px 4px 0;
  margin-left: calc(var(--nav-circle-width) / 2 - var(--timeline-circle-width) / 2);
  margin-bottom: 50px;
  margin-right: 10px;
  border-radius: 100px 10px 100px 100px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;

  &:hover {
    color: #fff;
    background-color: var(--nav-main-color);
  }

  &.is-active {
    color: var(--nav-main-color);
    background-color: #fff;
    box-shadow: 2px 4px 12px -8px #cabfff;

    .nav-tabs-timeline-item-icon-box {
      width: var(--timeline-circle-width);
      height: var(--timeline-circle-width);
    }

    .nav-tabs-timeline-item-box {
      font-size: 16px;
      padding-left: 16px;
    }
  }
}

.nav-tabs-timeline-item-icon {
  width: calc(var(--timeline-circle-width));
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-tabs-timeline-item-icon-box {
  width: calc(var(--timeline-circle-width) / 2);
  height: calc(var(--timeline-circle-width) / 2);
  border-radius: 100%;
  border: 5px solid var(--nav-bg-color);
  box-sizing: border-box;
  background-color: var(--nav-main-color);

  .el-icon {
    width: 100%;
    height: 100%;
  }
}

.nav-tabs-timeline-item-box {
  min-width: 100px;
  margin: 12px 0;
}

// 动画效果

@keyframes nav-tabs-header-circle-ring-before {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }  
}

@keyframes nav-tabs-header-circle-ring-after {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }  
}
</style>
